<div class="abnormal-list-containar">
  <div class="table-tool-bar">
    <form [formGroup]='abnormal_form' nz-form [nzLayout]="'inline'">
      <nz-form-item>
        <nz-form-label>关键字</nz-form-label>
        <nz-form-control>
          <input type="text" nz-input  placeholder="请输入关键字" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="ml20">
        <nz-form-label>选择日期</nz-form-label>
        <nz-form-control>
          <nz-date-picker formControlName="date"></nz-date-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="ml20">
        <nz-form-control>
          <button nz-button nzType='primary' (click)='handleQuery()'>查询</button>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="ml20">
        <nz-form-control>
          <button nz-button nzType='primary' (click)='export()'>导出</button>
        </nz-form-control>
      </nz-form-item>
    </form>

  </div>
  <div class="table-content">
    <nz-table #recordTable [nzData]="listOfData" nzSize="middle" [nzShowSizeChanger]="true" [nzShowQuickJumper]="true"
      [nzPageSize]="5">
      <thead>
        <tr>
          <th>序号</th>
          <th>线路</th>
          <th>站点</th>
          <th>巡检项点</th>
          <th>巡检时间</th>
          <th>图像识别结果</th>
          <th>是否正常</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of recordTable.data let i = index">
          <td>{{ i+1 }}</td>
          <td>{{ data.name }}</td>
          <td>{{ data.subscibe }}</td>
          <td>{{ data.time }}</td>
          <td>{{ data.name }}</td>
          <td>{{ data.time }}</td>
          <td>{{ data.name }}</td>
          <td class='option-td'>
            <a (click)="onOptionTdClick(data)">查看图片</a>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</div>